<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <h1>学生姓名: {{studentName}}</h1>
    <!-- 通过父组件给子组件  绑定自定义事件 (使用@ 或 v-on )实现：子给父传递数据 -->
<!--    <student v-on:sendStudentName="getStudentName"/>-->

    <student @sendStudentName="getStudentName" @demo="t1"/>
<!--    <student @sendStudentName.once="getStudentName"/>-->

    <h1>ref绑定自定义事件</h1>
    <!-- 通过父组件给子组件  绑定自定义事件 (使用ref )实现：子给父传递数据 -->
<!--    这种click会被当成自定义事件-->
<!--    <student ref="student" @click="show"/> -->

<!--    这种点击不会被当成自定义事件,使用native修饰-->
    <student ref="student" @click.native="show"/>

    <hr>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <school :getSchoolName="getSchoolName"/>
  </div>
</template>

<script>
import School from "@/components/School.vue";
import Student from "@/components/Student.vue";
export default {
  name: 'App',
  components: {
    Student,School
  },
  data() {
    return {
      msg: 'hello',
      studentName: ''
    }
  },
  methods: {
    getSchoolName(name) {
      console.log('app收到了 学校名称：',name)
    },
    getStudentName(name,...params) {
      console.log('getStudentName被调用了。。',name,params)
      this.studentName = name
    },
    t1() {
      console.log('t1被调用了。。')
    },
    show() {
      console.log('show 。。.')
    }
  },
  mounted() {
    // this.$refs.student.$on('sendStudentName',this.getStudentName) //绑定自定义事件


    //使用箭头函数: this 指向App组件的实例
    this.$refs.student.$on('sendStudentName',(name,...params)=> {
      console.log('获取到学生姓名: ',name,params)

      console.log('this:',this) //this 指向App组件的实例
      this.studentName = name
    }) //绑定自定义事件

    //坑:注意点===>
    /*this.$refs.student.$on('sendStudentName',function (name,...params) {
      console.log('获取到学生姓名: ',name,params)

      console.log('this:',this) //this 指向student组件的实例
      this.studentName = name
    }) //绑定自定义事件*/



    // this.$refs.student.$once('sendStudentName',this.getStudentName) //绑定自定义事件（仅一次）
    /*setTimeout(()=>{

    },3000)*/
  }
}
</script>

<style>
#app {
  background: gray;
  padding: 10px;
}
</style>
